<template>
	<view>
		<view class="topnav">
			<van-nav-bar title="商品详情"  left-arrow @click-left="onClickLeft">
			  <template #right>
			    <van-icon name="like-o" />
			  </template>
			</van-nav-bar>
		</view>
		<view class="box">
			<view class="sw">
				<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				  <van-swipe-item class="item">
					  <image :src="item.imgUrl" mode=""></image>
				  </van-swipe-item>
				</van-swipe>
			</view>
			<!-- 商品的基本信息 -->
			<view class="info">
				<view class="title">
					<text>{{item.sname}}</text>
				</view>
				<view class="pic">
					<text class="tex1">¥{{item.sprice}}</text>
					<text class="tex2">{{item.sales}}人付款</text>
				</view>
				<view class="qt">
					<text class="xh">货号：DM0774  尺码:36 36.5 37.5 38 38.5 39 40 40.5 41 42 42.5 43 44 45</text>
				</view>
			</view>
			<view class="pl">
				<text class="hp">好评 ({{pl}})</text>
				<text class="gd">查看更多</text>
			</view>
			
		</view>
		
		<!-- 详情的图片 -->
		<view class="banner">
			<scroll-view scroll-y="true" class="scroll">
				暂时没有图片偶!
			</scroll-view>
		</view>
		
		<!-- 底部固定 -->
		<view class="btm">
			<van-goods-action>
			  <van-goods-action-icon icon="cart-o" text="购物车" :badge="badge"/>
			  <van-goods-action-icon icon="chat-o" text="客服" />
			  <van-goods-action-button color="#085710" type="warning" @click=addCart text="加入购物车" />
			  <van-goods-action-button color="#085710" type="danger" @click="purchase"  text="立即购买" />
			</van-goods-action>
		</view>
		
		<view class="onload">
			<van-popup v-model="show" round position="bottom" :style="{ height: '90%' }" class="load">
				<van-nav-bar
				  title="选择"
				  left-arrow
				  @click-left="onloadLeft"
				/>
				
				<view class="box">
					<view class="tex1" v-show="!isShop">
						<text>请选择规格</text>
					</view>
					
					<view class="tem" v-show="isShop">
						<view class="img">
							<image :src="item.imgUrl" mode=""></image>
						</view>
						<view class="te-info">
							<text class="name">{{item.sname}}</text>
							<text class="tex2">¥{{item.sprice}}</text>
							<text class="kc">库存:366</text>
						</view>
					</view>
					
					<view class="cm">
						<text>尺码</text>
						<view class="num">
							<view :class="[cheSize,size == item.size ? gl : '']" @click="getSize(item.size)" v-for="(item,index) in sizeList" :key="item.id">
								{{item.size}}
							</view>
						</view>
					</view>
					
					<view class="count">
						<van-stepper v-model="value" input-width="150rpx" button-size="32px" />
					</view>
					
					<view class="bt">
						<van-button round color="#085710" type="info" size="large" @click="orders">确定</van-button>
					</view>
				</view>
				
			</van-popup>
		</view>
	</view>
</template>

<script>
	import {getSize,getDetail,AddOrder} from '../../request/api.js'
	import store from '../../store/index.js'
	export default {
		data() {
			return {
				// 购物车显示数量
				badge:'',
				item:'',
				pl:0,
				show:false,
				sizeList:[],
				// 计数器的值
				value:1,
				isShop:false,
				// 选择size的码数
				size:'',
				cheSize:'cheSize',
				gl:'gl'
			}
		},
		methods: {
			onClickLeft(){
				uni.navigateBack({
					delta: 1
				});
			},
			
			// 生成预订单
			 orders(){
				// 进行判断是否有选择鞋子的尺码
				if(this.size==''){
					//没有直接return
					return this.$notify('请选择尺码')
				}
				// 有则继续往下走
				let addres=''
				uni.getStorage({
					key: 'addList',
					success: function (res) {
						addres = res.data[0]
					}
				}); 
				let oid = new Date().getTime().toString()
				oid = oid.slice(6,-1)
				oid = parseInt(oid)
				let order = {
					oid,
					sname:this.item.sname,
					simg:this.item.imgUrl,
					sprice:this.item.sprice,
					size:this.size,
					num:this.value, 
					ostate:1 ,  //订单类型  1:未付款  2:待发货  3:待收货
					addres:addres.addres,
					aname:addres.aname,
					tel:addres.tel,
					uid:store.state.user.oid
				}
				AddOrder(order,(res)=>{
					// console.log(res);
					if(res.code==200){
						uni.navigateTo({
							url:'/pages/order/order'
						})
						store.commit('addLoadOrder',order)
					}else{
						this.$notify(res.msg)
					}
				})
				
				
			},
			
			// 购买事件
			purchase(){
				this.show = true	
			},
			// 这是弹出层左边的点击事件
			onloadLeft(){
			},
			
			// 尺码事件
			getSize(e){
				// console.log(e);	
				this.size = e
				this.isShop = true
			},
			getSizeList(){
				getSize((res)=>{
					this.sizeList = res
				})
			},
			addCart(){
				this.$notify('这个功能还没实现呢')
			},
			
			getDetailShop(id){
				getDetail(id,(res)=>{
					this.item= res[0]
				})
			}
		},
		onLoad(option){
			this.id = option.id
			// 根据商品的ID来查询商品的详细信息
			this.getDetailShop(this.id)
			
			this.getSizeList()
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f3f3f3;
	}
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
	height: 320rpx;
    text-align: center;
    background-color: #f3f3f3;
  }
  .item{
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  image{
		  height: 100%;
	  }
  }
  .box{
	  .info{
		  margin-top: 5px;
		  width: 100%;
		  height: 260rpx;
		  background-color: white;
		  box-sizing: border-box;
		  padding: 7px 10px;
		  .title{
			  font-size: 1.2rem;
		  }
		  .pic{
			  margin-top: 4px;
			  display: flex;
			  justify-content: space-between;
			  .tex1{
				  font-size: 1.7rem;
				  color: #085710;
			  }
		  }
		  .xh{
			  color: #c8c8c8;
			  font-size: 0.9rem;
			  margin-top: 10px;
		  }
	  }
	  .pl{
		  width: 100%;
		  height: 120rpx;
		  margin-top: 10px;
		  background-color: white;
		  box-sizing: border-box;
		  padding: 10px;
		  display: flex;
		  justify-content: space-between;
		  
		  .gd{
			  font-size: 0.8rem;
		  }
	  }
  }
  .scroll{
	  white-space: nowrap;
	  height: 800rpx;
  }
  .btm{
	  position: fixed;
	  bottom: 0;
	  width: 100%;
	  height: 140rpx;
	  background-color: white;
  }
  
  // 弹出层
  .load{
	  background-color: #f3f3f3;
	  // display: flex;
	  // flex-direction: column;
	  .box{
		  width: 100%;
		  height: 800Rpx;
		box-sizing: border-box;
		padding: 40rpx 30rpx;
		.tex1{
			width: 100%;
			height: 70rpx;
			background-color: white;
			box-sizing: border-box;
			padding: 10rpx 40rpx;
			border-radius: 17rpx;
			text{
				font-size: 0.9rem;
			}
		}
		.cm{
			margin: 15rpx 0;
			width: 100%;
			height: 330rpx;
			background-color: white;
			box-sizing: border-box;
			padding: 10rpx 35rpx;
			border-radius: 17rpx;
			.num{
				width: 100%;
				height: 250rpx;
				// background-color: pink;
				box-sizing: border-box;
				padding: 20rpx 7rpx;
				display: flex;
				flex-wrap: wrap;
			}
			.cheSize{
				margin:0 10rpx 15rpx 0;
				width: 70rpx;
				height: 70rpx;
				border: 1px solid #eaea00;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.gl{
				border: 0;
				background-color: #085710;
				color: white;
			}
		}
		.count{
			padding-left: 40rpx;
			width: 100%;
			height: 100rpx;
			background: white;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			margin-bottom: 20rpx;
		}
		.tem{
			width: 100%;
			height: 180rpx;
			background-color: white;
			border-radius: 15rpx;
			box-sizing: border-box;
			padding: 10rpx 0 10rpx 20rpx;
			display: flex;
			justify-content: space-around;
			.img image{
				width: 145rpx;
				height: 145rpx;
			}
			.te-info{
				width: 67%;
				height: 100%;
				display: flex;
				flex-direction: column;
				.name{
					display: -webkit-box;
					-webkit-box-orient: vertical;
					 -webkit-line-clamp: 2;
					  overflow-y: hidden;
				}
				.tex2{
					font-size: 1.2rem;
					color: #085710;
				}
				.kc{
					font-size: 0.8rem;
					color: #c8c8c8;
				}
			}
		}
	  }
  }
</style>
